<script>
export default {
  name: "Hello",
  data() {
    return {
      option: {
        title: { text: '公厕类型', subtext: 'Fake Data', left: 'center' },
        tooltip: { trigger: 'item' },
        legend: { orient: 'vertical', left: 'left' },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '智能公厕' },
              { value: 300, name: '普通公厕' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      instance: null // 保存ECharts实例
    }
  },
  methods: {
    initEcharts() {
      this.instance = this.$echarts.init(this.$refs.div1); // 初始化并保存实例
      this.instance.setOption(this.option); // 设置初始选项
    },
    selectAds() {
      this.$http({ url: "/ads/adsSelect", method: "GET" }).then(res => {
        const datas = res.data.data;
        const newDatas = [];
        // 遍历数据并分类
        datas.forEach(item => {
          if (item.isSmart === 0) {
            newDatas.push({ value: item.total, name: '普通公厕' });
          } else {
            newDatas.push({ value: item.total, name: '智能公厕' });
          }
        });
        // 更新图表数据
        this.option.series[0].data = newDatas;
        if (this.instance) {
          this.instance.setOption(this.option); // 更新实例
        }
      });
    }
  },
  mounted() {
    this.initEcharts(); // 初始化实例
    this.selectAds();   // 获取数据并更新
  }
}
</script>

<template>
  <div style="height: 300px" ref="div1"></div>
</template>
